<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/includes/common.jsp" %>

	<span style="float: left;border: thin;border-color: red;width: 50%;">
		<div id="view-mode-buttons" >
			<a id="dish-list-button" href="#" onclick="showDishList();"style="font-weight: normal">Danh sách món ăn</a> :: 
			<a id="recommend-list-button" href="#" onclick="showRecommendList();" style="font-weight: bold">Danh sách gợi ý</a>
		</div>
		<div id="dish-list" style="overflow: auto; width: 100%; height: 450px;display: none">
			<div>dishes list here</div>
			<div>
				<!--<c:forEach items="${action.dishes}" var="dish">
				<a href="#" onclick="viewDish('${dish.id}');">${dish.name}</a> |
				</c:forEach>
			-->
			<iframe id="dish-list-frame" src="/dish/list?edit=false" width="90%" frameborder="0"></iframe>
			</div>
		</div>
		<div id="recommend-list" style="overflow: auto; width: 100%; height: 450px;">
			recommended meals list here
		</div>
	</span>
	<span  style="float: right;border: thin;border-color: red;">
		<jsp:include page="chat.jsp"></jsp:include>
	</span>
	
	<script type="text/javascript">
		function showDishList(){
			$("#dish-list").show();
			$("#dish-list-button").css("font-weight","bold");
			$("#recommend-list").hide();
			$("#recommend-list-button").css("font-weight","normal");

			$("#dish-list-frame").attr('src','/dish/list?edit=false');
		}

		function showRecommendList(){
			$("#dish-list").hide();
			$("#dish-list-button").css("font-weight","normal");
			$("#recommend-list").show();
			$("#recommend-list-button").css("font-weight","bold");
		}

	</script>